<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/scratch.css" rel="stylesheet" />
	</head>

	<body>
		<!--页面标题栏开始-->
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<h1 class="mui-center mui-title">抽取奖品</h1>
		</div>
		<div class="mui-content">
			<img id="gift-cover" />
			<div id="scratch-card" style="display: block;">
				<h4>刮刮开奖</h4>
				<div class="scratchit">
					<img id="scratch-result" />
					<img id="scratch-cover" />
				</div>
			</div>

			<form id="delivery-info" style="display: none;">
				<div class="mui-input-row">
					<input id="inputName" type="text" class="mui-input-clear" placeholder="收件人姓名">
				</div>
				<div class="mui-input-row">
					<input id="inputMobile" type="text" class="mui-input-clear" placeholder="电话">
				</div>
				<div class="mui-input-row">
					<input id="inputAddress" type="text" class="mui-input-clear" placeholder="地址">
				</div>
				<div class="mui-button-row">
					<a id="submit-button">提交信息</a>
				</div>
			</form>
			<div id="delivery-info-get" style="display: none;">
				<h4>提交成功</h4>
				<p>请中奖者加入QQ群：490443274  验证信息为手机号。请勿泄露QQ群号，多谢</p>
				<h5>火速分享到</h5>
				<div id="share">
					<img data-id="sinaweibo" data-type="sinaweibo" src="img/share_weibo_new.png" />
					<img data-id="qq" data-type="qq" src="img/share_qq_new.png" />
					<img data-id="weixin" data-type="weixin-session" src="img/share_weixin_new.png" />
					<img data-id="weixin" data-type="weixin-timeline" src="img/share_timeline_new.png" />
				</div>
			</div>
			<div class="control-buttons">
				<img id="close-btn" src="img/btn_close.png" />
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.eraser.js"></script>
		<script src="js/av-mini-1.0.js"></script>
		<script>
			//随机刮刮封面
			var Arr = ["scratch_cover_tf.png", "scratch_cover_wjk.png", "scratch_cover_yyqx.png", "scratch_cover_wy.png"];
			var n = Math.floor(Math.random() * Arr.length + 1) - 1;
			document.getElementById("scratch-cover").src = "img/scratch/" + Arr[n];
			var shares = {};
			
			var storage = window.localStorage;
			var appid = 'kou72um0ioak1kubrz0klwx8a7s3l261mgt54vbyotnblnby';
			var appkey = 'o56bexx1vr522x7ygfkvi7efvbhhmo6x2oaf3txb75wi2509';
			AV.initialize(appid, appkey);
			var Gift = AV.Object.extend('Gift');
			
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var query = new AV.Query('Gift');
				query.include("badges");
				query.get(self.gift_id, {
					success: function(gift) {
						// 成功获得实例
						document.getElementById("gift-cover").src = gift.get("pic");
						//刷新页面
						var gift_page = plus.webview.getWebviewById("gift");
						gift_page.evalJS("swiper.destroy();load_gifts()");
						//产生随机结果
						var r = Math.random() * 100;
						console.log("随机数为：" + r);
						if ((r < gift.get("winning")) && (gift.get("left") > 0)) {
							document.getElementById("scratch-result").src = "img/scratch/tf_scratch_win.png";
							$('#scratch-cover').eraser({
								size: 20,
								completeRatio: .4,
								completeFunction: function() {
									plus.nativeUI.alert("赶紧填写收货地址吧", function() {
										$("#scratch-card").hide();
										$("#delivery-info").fadeIn();
									}, "恭喜你！", "我知道啦");
								}
							});
						} else {
							document.getElementById("scratch-result").src = "img/scratch/tf_scratch-lose.png";
							$('#scratch-cover').eraser({
								size: 20,
								completeRatio: .4,
								completeFunction: function() {
									plus.nativeUI.alert("明天还能再试！", function() {
										mui('body').off('tap', '#close-btn', confirm);
										mui('body').on('tap', '#close-btn', function() {
											self.close();
										});
									}, "别灰心……", "我知道啦");
								}
							});
						}
						//显示页面
						plus.nativeUI.closeWaiting();
						self.show("slide-in-bottom");
					},
					error: function(error) {
						// 失败了.
					}
				});
				//搞定分享列表
				plus.share.getServices(function(s) {
					if (s && s.length > 0) {
						for (var i = 0; i < s.length; i++) {
							var t = s[i];
							//使用id作为key
							shares[t.id] = t;
							console.log(i + ":" + t.id);
						}
					}
				}, function() {
					console.log("获取分享服务列表失败");
				});
				mui('#delivery-info').on('tap', 'a', function() {
					if (!$("#inputName") || $("#inputName").val() == "") {
						plus.nativeUI.alert("没有填写收货人姓名", function() {}, "有问题", "我知道啦");
						return false;
					};
					if (!$("#inputMobile") || $("#inputMobile").val() == "") {
						plus.nativeUI.alert("没有填写电话", function() {}, "有问题", "我知道啦");
						return false;
					}
					if (!$("#inputAddress") || $("#inputAddress").val() == "") {
						plus.nativeUI.alert("没有填写地址", function() {}, "有问题", "我知道啦");
						return false;
					}
					plus.nativeUI.confirm("一旦确认，不可更改呢", function(event) {
						if (0 == event.index) {
							plus.nativeUI.showWaiting("提交中");
							var delivery = AV.Object.new('Delivery');
							var gift = AV.Object.new('Gift');
							gift.id = self.gift_id;
							delivery.set("name", $("#inputName").val());
							delivery.set("mobile", $("#inputMobile").val());
							delivery.set("address", $("#inputAddress").val());
							delivery.set("gift", gift);
							var user = AV.User.current();
							if (user) {
								delivery.set("user", user);
							}
							delivery.save(null, {
								success: function(d) {
									plus.nativeUI.closeWaiting();
									$("#delivery-info").hide();
									$("#delivery-info-get").fadeIn();
									var Gift = AV.Object.extend('Gift');
									var gift = new AV.Query(Gift);
									query.get(self.gift_id, {
										success: function(gift) {
											gift.increment('left', -1);
											gift.save();
										},
										error: function(object, error) {
											console.log("更新奖品数量失败：" + error.message);
										}
									});
								},
								error: function(post, error) {
									mui.toast("提交失败，请重试")
									console.log('创建物流信息失败: ' + error.message);
								}
							});
							mui('body').off('tap', '#close-btn', confirm);
							mui('body').on('tap', '#close-btn', function() {
								self.close();
							});
						}
					}, "确认物流信息", ["就是这个", "我再想想"]);
				});
				var confirm = function() {
					plus.nativeUI.confirm("退出就不能再进来了！", function(event) {
						if (0 == event.index) {
							self.close();
						}
					}, "退出？", ["确认放弃", "我再想想"])
				}
				mui('body').on('tap', '#close-btn', confirm);
				//分享设置
				mui('#share').on('tap', 'img', function() {
					var id = this.getAttribute('data-id');
					var type = this.getAttribute('data-type');
					var gift = new Gift();
					gift.id = self.gift_id;
					gift.fetch().then(function(g) {
						var msg = {};
						var web_url = g.get('pic');
						var share_url = web_url;
						if(mui.os.android){
							share_url = storage['img_' + web_url];
						}
						msg.pictures = [share_url];
						msg.content = "我在饭盒·问鼎的饭拍总决选中获得了【"+g.get("info")+"】，现在在饭盒APP内给最喜欢的饭拍图片投票可以抽取包括IPad、问鼎大礼包在内的700份奖品！下载参与戳：http://t.fanheapp.com/download @饭盒喵 @THRONE-问鼎";
						console.log(JSON.stringify(msg));
						if (type == "weixin-session") {
							msg.extra = {
								scene: "WXSceneSession"
							}
						}
						if (type == "weixin-timeline") {
							msg.extra = {
								scene: "WXSceneTimeline"
							}
						}
						var share = shares[id];
						if (share) {
							if (share.authenticated) {
								console.log("正在分享到" + share.description);
								share.send(msg, function() {
									mui.toast("分享到" + share.description + "成功");
								}, function(e) {
									mui.toast("分享到" + share.description + "失败");
									console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
								});
							} else {
								share.authorize(function() {
									share.send(msg, function() {
										mui.toast("分享到" + share.description + "成功！ ");
									}, function(e) {
										mui.toast("分享到" + share.description + "失败");
										console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
									});
								}, function(e) {
									mui.toast("认证授权失败" + e.message);
									console.log("认证授权失败：" + e.code + " - " + e.message);
								});
							}
						} else {
							mui.toast("无法获取分享服务");
						}
					}, function(error) {
						console.log('error when fetch almanac to share');
					});
				});
			});
		</script>
	</body>

</html>